import { getToken } from '@/utils/auth'
import { Message } from 'element-ui' // 引入element-ui的Message组件
import axios from 'axios'
import router from '@/router';
import store from '@/store';
const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/v1',
  timeout: 5000 // request timeout
})

// 请求拦截器  -- 客户端发送请求 针对请求参数做出处理 请求头中添加token等
service.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    const token = getToken()
    // 只有token有效，才能返回正常数据，token就是后端用来做判断的标识
    // axios请求拦截器可以同一控制，一次添加，多个接口生效
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器   后端->响应式拦截器->客户端
service.interceptors.response.use(
  response => {
    return response.data
  },
  // 接口出错的时候自动执行这个回调函数
  error => {
    // Token失效处理
    // Token 401处理
    // 业务背景：Token存在一定的有效时间，如果长时间不进行接口访问，Token有可能就失效了，需要我们做统一控制
    // 核心思路：因为我们不知道到底用户实在访问哪个接口的时候发生了Token失效访问，所以需要通过拦截器来做
    // 1. 跳转到登录页
    // 2. 清除掉过期Token
    // console.dir(error.response.status)
    if (error.response.status === 401) {
      // 1. 跳转到登录
      router.push('/login')
      // 2. 清空用户数据
      store.commit('user/clearUserInfo')
    }
    // 错误统一处理
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

export default service
